<template>
    <div class='fxn-body'>
        <el-upload :accept="accept" ref="upload" :action="action" :headers="headers" :on-success="handSuccess" :on-remove="handleRemove" :on-exceed="handleExceed" :on-preview="handlePreview" :before-upload="beforeUpload" multiple :limit="limit" :file-list="fileList">
            <el-button type="success">上传文件</el-button>
            <template #tip>
                <div class="el-upload__tip">支持格式：<span class="fxn-text-red">{{accept}}</span> ，单个文件不能超过<span class="fxn-text-red">{{size}}MB</span></div>
            </template>
        </el-upload>
    </div>
</template>

<script>
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed  } from 'vue'
    export default defineComponent({
        name: '',
        props: {
            size: {
                type: Number,
                default: () => {
                    return 5
                }
            },
            accept: {
                type: String,
                default: () => {
                    return '*'
                }
            },
            limit: {
                type: Number,
                default: () => {
                    return 1
                }
            },
            fileList: {
                type: Array,
                default: () => {
                    return []
                }
            },
            filePath: {
                type: String,
                default: ()=>{
                    return '/Fapi/File/upload'
                }
            }
        },
        emit: ['update:fileList'],
        setup(props) {
            const { proxy } = getCurrentInstance();
            //初始化数据
            const state = reactive({
                headers: {
                    token: localStorage.getItem('token')
                },
                action: proxy.PathUrl + props.filePath,
            })

            //上传成功
            const handSuccess = (response, file,fileList) => {
                console.log(response,fileList)
                let fileArray = [];
                let objFile = {name: '', url: ''};
                if(response.code != 1){
                    for (let index = 0; index < fileList.length; index++) {
                        if(!fileList[index].response){
                            objFile = fileList[index]
                        }
                    }
                    fileArray.push(objFile);
                    proxy.$msg.error(response.msg);
                }else{
                    objFile.name = response.data;
                    objFile.url = response.data;
                }
                props.fileList.push(objFile);
                fileArray = props.fileList;
                proxy.$emit('update:fileList',fileArray)
            }

            //删除
            const handleRemove = (file,fileList) => {
                for (let index = 0; index < fileList.length; index++) {
                    if(fileList[index].response){
                        fileList[index].name = fileList[index].response.data
                        fileList[index].url = fileList[index].response.data
                    }
                }
                
                proxy.$emit('update:fileList',fileList);
            }

            //判断上传文件格式
            const beforeUpload = (file) => {
                //文件格式较验
                if(proxy.accept != '*'){
                    let arrFormat = proxy.accept.split(',')
                    let arr = [];
                    for(let key in arrFormat){
                        arr.push(arrFormat[key].slice(1))
                    }
                    if(arr.indexOf(file.name.split('.')[1]) < 0){
                        proxy.$msg.error('文件格式不正确,请重新选择!');
                        return false;
                    }
                }
                
                //文件大小较验
                if(file.size / 1024 / 1024 > proxy.size){
                    proxy.$msg.error('文件大小不能超过' + proxy.size + 'Mb');
                    return false;
                }
            }

            //限制文件
            const handleExceed = (file,fileList) => {
                proxy.$msg.error(`当前限制选择 ${proxy.limit} 个文件，本次选择了 ${file.length} 个文件，共选择了 ${file.length + fileList.length} 个文件`);
            }

            //查看文件
            const handlePreview = (file) => {
                window.open(proxy.PathUrl + file.response.data);
            }
            
            //Dom加载
            onMounted(()=>{
                
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                handSuccess,
                beforeUpload,
                handleExceed,
                handlePreview,
                handleRemove,
                
                //组件方法
            }

        },
    })
</script>

<style scoped>
   
</style>